<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <title>登录-浮生若梦</title>
    <link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script src="js/jquery-3.5.1.min.js"></script>
    <style>
        /*.bodystyle {
            background: url(../static/img/nier.jpg) no-repeat center;
            background-position: center 0;
            background-size: cover;
            margin: 0px;
        }*/

        .formstyle {
            background-color: white;
            opacity: 0.7;
            padding: 50px;
            border-radius: 10px
        }

        .col-center-block {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -moz-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            -o-transform: translateY(-50%);
            transform: translateY(-50%);
        }

        .beijing {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0px;
            top: 0px;
            background: url("img/nier-gaosi.jpg");
            background-repeat: no-repeat;
            background-size: cover;
            /*-webkit-filter: blur(5px);
            -moz-filter: blur(5px);
            -o-filter: blur(5px);
            -ms-filter: blur(5px);*/
        }

        .two {
            width: 50%;
            height: auto;
            float: left;
            box-sizing: border-box;
        }
        .a{
            color: #999898;
        }
        a:hover{
            text-decoration: none;
        }
    </style>
</head>
<body>
<div th:replace="part/nav ::nav"></div>
<div class="beijing"></div>
<div class="col-md-4 col-lg-4 col-lg-offset-4 col-md-offset-4 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 col-center-block formstyle">
    <div align="center" style="margin-bottom: 15px;">
        <h3><b>《CallToMind》</b></h3>
        <span style="margin-left: 50%" th:text="#{login.slogan}"></span>
    </div>
    <form action="/login.htm" method="post" id="login_form">
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" id="email" th:text="#{login.account}"></span>
            <input type="text" id="username" name="username" class="form-control" th:placeholder="#{login.accountTip}"
                   aria-describedby="sizing-addon1">
        </div>
        <div class="form-group input-group input-group-lg">
            <span class="input-group-addon" th:text="#{login.password}"></span>
            <input type="password" id="password" name="password" class="form-control" th:placeholder="#{login.passwordTip}"
                   aria-describedby="sizing-addon1">
        </div>
        <div align="center">
            <div align="left" class="two">&nbsp;</div>
            <div align="right" class="two"><a class="a" href="/forgetPassword.html" th:text="#{login.forget}"></a></div>
        </div>
        <div align="center" style="padding-top: 5%">
            <button class="btn btn-default" type="button" th:text="#{login.submit}" onclick="toSubmit()"></button>
            <button type="reset" class="btn btn-default" th:text="#{login.reset}"></button>
        </div>
        <div align="center">
            <a class="btn btn-sm" th:href="@{/login.html(l='zh_CN')}">中文</a>
            <a class="btn btn-sm" th:href="@{/login.html(l='en_us')}">English</a>
        </div>
    </form>
</div>
<script>
    function isEmail() {
        var email = $("#username").val();
        var reg = /^[A-Za-z]+\w+(-|\.|)+\w*\@\w+((\.|-)\w+)*\.\w+/;
        if (email == "") {
            alert("账号不能为空");
            $("#email").css({'border': "1px  solid  red"});
            return false;
        }
        var bool = reg.test(email);
        var flag = false;
        if (bool) {
            // ajax     判断 邮箱是否 已存在
            $.ajax({
                cache: false,
                async: false,
                type: 'post',
                url: "/verifyEmail.htm",
                data: {'email': email},
                success: function (res) {
                    //alert(res);
                    //不允许在  succcess这个 函数里  直接 写 return
                    if (res) {
                        flag = false;
                    } else {
                        flag = true;
                    }
                }
            });
            /////根据当前flag值  判断    div 提示
            if (!flag) {
                alert("用户不存在！");
                $("#email").css({'border': "1px solid red"});
            }
            return flag;

        } else {
            alert("账号格式不正确!请使用你的邮箱！");
            $("#email").css({'border': "1px  solid  red"});
            return false;
        }
    }

    function isPassword() {
        var pwd = $("#password").val();
        if (pwd == "") {
            alert("密码不能为空!");
            return false;
        }
        return true;
    }

    function toSubmit() {
        if (isEmail()&&isPassword()){
            document.getElementById("login_form").submit();
        }
    }
</script>
</body>
</html>
